<template>
  <div class="admin-box">
    <el-container style="border: 1px solid #eee; height: 100vh">
      <el-aside width="1.7rem" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '2', '3']" :default-active="indexs">
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-menu"></i>用户管理</template
            >
            <el-menu-item-group>
              <router-link to="userList">
                <el-menu-item index="1-1"> 用户列表 </el-menu-item></router-link
              >
              <router-link to="useropinion">
                <el-menu-item index="1-2"
                  >用户反馈信息</el-menu-item
                ></router-link
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"
              ><i class="el-icon-menu"></i>游戏管理</template
            >
            <el-menu-item-group>
              <router-link to="gamelist">
                <el-menu-item index="2-1">游戏详情</el-menu-item></router-link
              >
              <router-link to="insertgame">
                <el-menu-item index="2-2">新增游戏</el-menu-item></router-link
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-menu"></i>游戏类别管理</template
            >
            <el-menu-item-group>
              <router-link to="admingamecate">
                <el-menu-item index="3-1">游戏类别</el-menu-item></router-link
              >
              <router-link to="insertcate">
                <el-menu-item index="3-2">新增类别</el-menu-item></router-link
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <span class="userNames">管理员 : {{ user.uname }}</span>
          <span class="adminout" @click="adminOut"> 退出 </span>
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { userMessage } from "../../network/usermes";
export default {
  name: "Admin",
  data() {
    return {
      showUser: true,
      showMessage: false,
      indexs: "1-1",
      user: "",
    };
  },

  created() {
    this.handleResize();
  },

  methods: {
    handleResize() {
      userMessage(this.$Cookie.get("userid")).then((res) => {
        this.user = res.data.data;
      });
      if (this.$route.path == "/admin/userList") {
        this.indexs = "1-1";
      }
      if (this.$route.path == "/admin/useropinion") {
        this.indexs = "1-2";
      }
      if (
        this.$route.path == "/admin/gamelist" ||
        this.$route.path == "/admin/modifygame"
      ) {
        this.indexs = "2-1";
      }
      if (this.$route.path == "/admin/insertgame") {
        this.indexs = "2-2";
      }
      if (
        this.$route.path == "/admin/admingamecate" ||
        this.$route.path == "/admin/upatecate"
      ) {
        this.indexs = "3-1";
      }
      if (this.$route.path == "/admin/insertcate") {
        this.indexs = "3-2";
      }
    },
    adminOut() {
      this.$Cookie.remove("userid");
      this.$Cookie.remove("uadmin");
      this.$router.push("/home");
      location.reload();
    },
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.admin-box a {
  text-decoration: none;
  color: black;
}

.userNames {
  font-size: 0.11rem;
  margin-right: 0.6rem;
}

.adminout {
  cursor: pointer;
}
</style>